<template>
    <div>
        <div class="center-all clearfix">
            <div class="income-title">
                <van-row>
                    <van-col span="8">
                        <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
                    </van-col>
                    <van-col span="8" class="text-align-c font-36">交易记录</van-col>
                    <van-col span="8" class="text-align-r">
                        <img class="icon_return" src="../../assets/image/center/icon_service_kf.png" alt="">
                    </van-col>
                </van-row>
            </div>
            <div class="income-list-box clearfix">
                <div class="income-list-tab">
                    <span class="fl font-28 color-6" :class="[tabIndex == index ? 'active' : '']" v-for="(item,index) in tabArr" :key="index" @click="tabNum(index)">{{item}}</span>
                </div>
                <ul class="clearfix">
                    <van-list v-model="loading" :finished="finished" @load="onLoad()">
                    <li class="clearfix income-li" v-for="(item,index) in recordsList" :key="index" v-if="recordsList.length>0">
                        <div class="fl left-box">
                            <img v-if="item.type == 10" src="../../assets/image/center/icon_recharge@3x.png" alt="">
                            <img v-else-if="item.type == 11 || item.type == 20" src="../../assets/image/center/icon_consume@3x.png" alt="">
                            <img v-else-if="item.type == 51 || item.type == 50 || item.type == 52 || item.type == 53 || item.type == 54" src="../../assets/image/center/icon_refund@3x.png" alt="">
                            <img v-else-if="item.type == 41 || item.type == 40" src="../../assets/image/center/icon_put forward@3x.png" alt="">
                            <img v-else-if="item.type == 31" :src="$imgPath(item.goods[0].obj.image)" alt="">
                            <img v-else-if="item.type == 32" :src="$giftPath(item.goods[0].obj.img)" alt="">
                            <img v-else-if="item.type == 23 && item.goods[0].obj" :src="$giftPath(item.goods[0].obj.image)" alt="">
                        </div>
                        <div class="fl right-box">
                            <span class="color-3 font-28">
                                <em class="fl" v-if="item.type == 31">收益：{{item.goods[0].obj.level + item.goods[0].count}}小时</em>
                                <em class="fl" v-if="item.type == 11">消费：充值钻石</em>
                                <em class="fl" v-if="item.type == 22">消费：购买礼物</em>
                                <em class="fl" v-if="item.type == 23">消费：服务下单</em>
                                <em class="fl" v-if="item.type == 20">消费：其他</em>
                                <em class="fl" v-if="item.type == 32">收益：礼物收入</em>
                                <em class="fl" v-if="item.type == 40">提现：收益提现</em>
                                <em class="fl" v-if="item.type == 41">提现：余额提现</em>
                                <em class="fl" v-if="item.type == 51">退款：订单退款</em>
                                <em class="fl" v-if="item.type == 52">退款：微信退款</em>
                                <em class="fl" v-if="item.type == 53">退款：支付宝退款</em>
                                <em class="fl" v-if="item.type == 54">退款：投诉退款</em>
                                <em class="fl" v-if="item.type == 10">充值：微信支付</em>
                                <em class="fl" v-if="item.type == 10 && item.payType == 20">充值：IOS充值</em>
                                <em class="fr" v-if="item.type == 11 || item.type == 20 || item.type == 41  || item.type == 51 || item.type == 40 || item.type == 23">-{{item.goods[0].price}}</em>
                                <em class="fr color-default" v-else>+{{item.amount}}</em>
                            </span>
                            <span class="color-3 font-24" v-if="item.type == 31 || item.type == 32">[收入余额]</span>
                            <span class="color-3 font-24" v-if="item.type == 11 || item.type == 20">[余额支出]</span>
                            <span class="color-3 font-24" v-if="item.type == 51">[退款余额]</span>
                            <span class="color-3 font-24" v-if="item.type == 54">[原路退款]</span>
                            <span class="color-3 font-24" v-if="item.type == 40 || item.type == 41">[余额提现]</span>
                            <span class="color-3 font-24" v-if="item.type == 10">[充值余额]</span>   
                            <span class="color-3 font-24" v-if="item.type == 23">[余额支出]</span>                                                    
                            <span class="color-9 font-24">
                                {{$time(item.createTime)}}
                            </span>
                        </div>
                    </li> 
                    <li class="arrayNull" v-if="nullData">暂无数据</li>             
                    </van-list>                     
                </ul>          
            </div>
        </div>
        <van-popup v-model="isDatetime" position="bottom" :overlay="true">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="confirmData" @cancel="isDatetime = !isDatetime" />
        </van-popup>
    </div>
</template>
<script>
import { Toast,List } from 'vant'
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            currentDate: new Date(),
            isDatetime:false,
            tabArr:['全部','充值','消费','收益','提现','退款'],
            tabIndex:0,
            recordsList:[],
            page:-1,
            size:10,
            loading: false,
            finished: false,
            totalElements:-1,
            nullData:false
        }
    },
    methods:{
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            }else{
                return value;
            }
        },
        confirmData(data){
            let endvalue = new Date(data)
            this.isDatetime = !this.isDatetime
        },
        onLoad(){
            if(this.recordsList.length == this.totalElements){
                this.finished = true
                this.loading = false
            }else{
                this.page++
                this.cash()         
            }
        },
        // tab切换
        tabNum(index){
            this.nullData = false
            this.tabIndex = index
            this.recordsList = []
            this.totalElements = -1
            this.page = -1
            this.onLoad()
        },
        cash(){
            let parmes = {
                type: this.tabIndex,
                size:10,
                page:this.page,
                size:this.size
            }
            apiHttp.apiCenter.cash(parmes,resp=>{
                if(resp.code == 200){
                    for(let i=0;i<resp.data.content.length;i++){
                        if(resp.data.content[i].type == 31 || resp.data.content[i].type == 32 || resp.data.content[i].type == 23){
                            if(resp.data.content[i].goods[0].goodsType != null){
                                let obj = JSON.parse(resp.data.content[i].goods[0].goodsType)
                                resp.data.content[i].goods[0].obj = obj
                            }
                        }
                        this.recordsList.push(resp.data.content[i])                       
                    }
                    if(this.recordsList.length == 0){
                        this.nullData = true
                    }
                    this.loading = false
                    this.totalElements = resp.data.totalElements
                }else{
                    Toast(resp.message)
                }
            })
        }
        
    }
}
</script>

<style scoped>
.center-all{
    width: 100%;
}
.income-title{
    padding: .2rem .6rem;
    width: calc(100% - 1.2rem);
    height: 1.36rem;
    line-height: 1.36rem;
}
.icon_return{
    width: .8rem;
    margin-top: .28rem;
}
.income-list-box{
    width: calc(100% - 1.2rem);
    padding: .2rem .6rem;
}
.income-list-tab{
    height: 1rem;
    line-height: 1rem;
    padding: .2rem 0;
    margin-bottom: 0.4rem;
}
.income-list-tab span{
    margin: 0 .51rem;
    border-bottom: solid transparent .06rem;
    padding: 0 .16rem;
}
.active{
    color: #D84F4D;
    font-weight: bold;
    border-bottom: solid #D84F4D .06rem !important;
}
.income-li{
    padding: .3rem 0 0 0;
}
.left-box{
    height: 2rem;
    width: 13%;
}
.left-box img{
    width: 60%;
}
.right-box{
    width: 85%;
    height: 2.4rem;
    padding-bottom: .3rem;
    border-bottom: #f5f5f5 solid .04rem;
}
.right-box span{
    height: .8rem;
    line-height: .8rem;
    display: block;
}
</style>

